<template>
<el-row class="container">
  <el-col :span="24" class="header">
    <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
      {{$t("message.logo")}}
    </el-col>
    <el-col :span="10">
      <div class="tools" @click.prevent="isCollapse = !isCollapse">
        <i class="fa el-icon-menu"></i>
      </div>
    </el-col>
    <el-col :span="2" class="userinfo">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link userinfo-inner" style="font-size: 18px">{{userName}} <i class="el-icon-caret-bottom"></i></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item divided @click.native="logout">{{$t('message.exit')}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
    <el-col :span="2" class="langs">
      <el-dropdown trigger="click">
      <span class="el-dropdown-link userinfo-inner" style="font-size: 17px">
        {{lang}}<i class="el-icon-caret-bottom"></i>
      </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="checkLang('zh_hans')">{{$t('message.zh-hans')}}</el-dropdown-item>
          <el-dropdown-item @click.native="checkLang('en')">{{$t('message.en')}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-col>
  <el-col :span="24" class="main">
    <aside :class="collapsed?'menu-collapsed':'menu-expanded'">
      <el-menu default-active="/TransactionPairs" class="el-menu-vertical-demo" @select="selected" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
        <el-menu-item v-if="userLevel !== '4'" index="/TransactionPairs">
          <i class="el-icon-document"></i>
          <span slot="title" class="menu-title" :title="$t('message.pair-list')">{{$t('message.pair-list')}}</span>
        </el-menu-item>
        <el-menu-item v-if="userLevel.indexOf('3') !== -1&&userLevel!== '4'" index="/StrategyRobot">
          <i class="el-icon-document"></i>
          <span slot="title" class="menu-title" title="策略机器人">策略机器人</span>
        </el-menu-item>
        <el-menu-item v-if="userLevel !== '3'&&userLevel!=='4'" index="/RobotList">
          <i class="el-icon-document"></i>
          <span slot="title" class="menu-title" :title="$t('message.robot-list')">{{$t('message.robot-list')}}</span>
        </el-menu-item>
        <el-menu-item v-if="userLevel !== '4'" index="/ModelList">
          <i class="el-icon-document"></i>
          <span slot="title" class="menu-title" :title="$t('message.template-list')">{{$t('message.template-list')}}</span>
        </el-menu-item>
        <el-menu-item v-if="userLevel !== '4'" index="/socket">
          <i class="el-icon-document"></i>
          <span slot="title" class="menu-title" title="市场详情">市场详情</span>
        </el-menu-item>
        <el-submenu v-if="userLevel !== '4'" index="/EntrustRecord">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title" class="menu-title" :title="$t('message.trade-management')">{{$t('message.trade-management')}}</span>
          </template>
          <el-menu-item index="/SelfRecoder">
            <i class="el-icon-document"></i>
            <span slot="title" class="menu-title" :title="$t('message.site-execution-history')">{{$t('message.site-execution-history')}}</span>
          </el-menu-item>
          <el-menu-item v-if="userLevel.indexOf('1') !== -1" index="/HuobiRecoder">
            <i class="el-icon-document"></i>
            <span slot="title" class="menu-title" :title="$t('message.hedge-execution-history')">{{$t('message.hedge-execution-history')}}</span>
          </el-menu-item>
          <el-menu-item v-if="userLevel.indexOf('1') !== -1" index="/PlCount">
            <i class="el-icon-document"></i>
            <span slot="title" class="menu-title" :title="$t('message.hedge-execution-history')">损益统计</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu>
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title" class="menu-title" title="审计管理">审计管理</span>
          </template>
          <el-menu-item index="/changeInEarn">
            <i class="el-icon-document"></i>
            <span slot="title" class="menu-title" title="收益变动统计">收益变动统计</span>
          </el-menu-item>
          <el-menu-item index="/balanceStat">
            <i class="el-icon-document"></i>
            <span slot="title" class="menu-title" title="余额统计">余额统计</span>
          </el-menu-item>
          <el-menu-item index="/CapitalAdjustment">
            <i class="el-icon-document"></i>
            <span slot="title" class="menu-title" title="资金调整">资金调整</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </aside>
    <section class="content-container">
      <div class="grid-content bg-purple-light">
        <el-col :span="24" class="content-wrapper">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </el-col>
      </div>
    </section>
  </el-col>
</el-row>
</template>

<script>
import {SetLang} from '../api/api'
export default {
  data () {
    return {
      sysName: 'Robot Ｍanagement System',
      collapsed: false,
      isCollapse: false,
      lang: localStorage.getItem('lang') === 'en' ? this.$t('message.en') : this.$t('message.zh-hans'),
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  computed: {
    userName () {
      return localStorage.getItem('user') || this.$t('message.  please-login')
    },
    userLevel () {
      return localStorage.getItem('userLevel') + ''
    }
  },
  methods: {
    // 退出登录
    logout: function () {
      let _this = this
      this.$confirm('确认退出吗?', '提示', {
        // type: 'warning'
      }).then(() => {
        localStorage.removeItem('user')
        _this.$router.replace('/login')
      }).catch(() => {

      })
    },
    checkLang (lang) {
      SetLang({lang: lang}).then(res => {
        console.log(111)
        if (res.data.code !== 0) {
          this.$message.error(this.$t('message.tip-48'))
        } else {
          localStorage.setItem('lang', lang)
          window.location.reload()
        }
      })
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
      console.log(1111)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    selected (index, indexPath) {
      console.log(index)
      console.log(indexPath)
      this.$router.push(index)
    }
  }
}

</script>

<style scoped lang="scss">
@import '../styles/vars';
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  .header {
    height: 60px;
    line-height: 60px;
    background: $color-primary;
    color:#fff;
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color:#fff;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 10px 0px 10px 10px;
          float: right;
        }
      }
    }
    .langs {
      text-align: right;
      float: right;
      color: #fff;
      .userinfo-inner {
        cursor: pointer;
        color:#fff;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 10px 0px 10px 10px;
          float: right;
        }
      }
    }
    .logo {
      //width:230px;
      height:60px;
      font-size: 20px;
      padding-left:20px;
      padding-right:20px;
      border-color: rgba(238,241,146,0.3);
      border-right-width: 1px;
      border-right-style: solid;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      img {
        width: 40px;
        float: left;
        margin: 10px 10px 10px 18px;
      }
      .txt {
        color:#fff;
      }
    }
    .logo-width{
      width:200px;
    }
    .logo-collapse-width{
      width:60px
    }
    .tools{
      padding: 0px 23px;
      width:25px;
      height: 60px;
      line-height: 70px;
      cursor: pointer;
      i {
        font-size: 25px;
      }
    }
  }
  .main {
    display: flex;
    // background: #324057;
    position: absolute;
    top: 60px;
    bottom: 0px;
    overflow: hidden;
    aside {
      /*flex:0 0 230px;*/
      /*width: 230px;*/
      // position: absolute;
      // top: 0px;
      // bottom: 0px;
      .el-menu{
        height: 100%;
      }
      .collapsed{
        width:60px;
        .item{
          position: relative;
        }
        .submenu{
          position:absolute;
          top:0px;
          left:60px;
          z-index:99999;
          height:auto;
          display:none;
        }

      }
    }
    .content-container {
      flex:1;
      overflow-y: scroll;
      padding: 20px;
      .breadcrumb-container {
        .title {
          width: 200px;
          float: left;
          color: #475669;
        }
        .breadcrumb-inner {
          float: right;
        }
      }
      .content-wrapper {
        background-color: #fff;
        box-sizing: border-box;
      }
    }
  }
}

.menu-title {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu-item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.el-submenu__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
